<template>
    <div class="box-5">
      <Header title="BOX5" go-back="true"></Header>
      <div class="wrapper" ref="wrapper">
        <ul class="content">
          <li v-for="(n,index) in 100" :key="index">
            <div class="arvar">
              <img src="../../../assets/Image/wylogo.png" alt="">
            </div>
            <div class="text">
              <p><span>喵：</span>这首歌不错</p>
              <p>2019.1.6</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
</template>

<script>
import Header from '../../Header/Header'
import Bscroll from 'better-scroll'

export default {
  name: 'box5',
  mounted () {
    this.$nextTick(() => {
      this.scroll = new Bscroll(this.$refs.wrapper, {})
    })
  },
  components: {
    Header
  }
}
</script>

<style lang="scss" scoped>
.box-5{
  width: 100%;
  padding-top: 50px;
  height: 626px;
  position: absolute;
  display: flex;
  overflow: hidden;
  justify-content: center;
  .wrapper{
    .content{
      width: 100%;
      text-align: center;
      li{
        width: 100%;
        display: -webkit-inline-box;
        .arvar{
          img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
          }
        }
        .text{
          p:first-child{
            font-size: 15px;
            color: #f2f2f2;
            span{
              color: peru;
            }
          }
          p:last-child{
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }
}
</style>
